<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text"><button>校验</button><span></span>
    <script>
        const inp = document.querySelector("input")
        const btn = document.querySelector("button")
        const spa = document.querySelector("span")
        btn.onclick = function(){
            //获取文本值
            const val = inp.value
            // 1.校验一个数字
            // const reg = /^\d$/
            // const reg = /^[0-9]$/

            // 2.校验10个数字
            // const reg = /^\d{10}$/
            // const reg = /^[0-9]{10}$/

            // 3. 校验这种邮政编码 021-200081
            // const reg = /^\d{3}-\d{6}$/
            
            // 4. 4-6位的数字或字母 
            // const reg = /^[0-9a-zA-Z]{4,6}$/
            // const reg = /^(\d|[a-z]){4,6}$/i
            // const reg = /^(\d|[a-zA-Z]){4,6}$/i

            // 5.包含至少一个数字
            // const reg = /\d/
            // const reg = /[0-9]/

            // 6.验证身份证号码
            // const reg = /^[1-9]\d{16}(\d|x)/i

            // 7.座机	123-12345678  或者  123-1234567
            // const reg = /^\d{3}-\d{7,8}$/

            // 8.验证密码(5-16个字符,包含数字,字母,下划线)
            // const reg = /^\w{5,16}$/

            // 9.验证邮箱(用户名@网站名.域名)
            // const reg = /^\w{5,16}@\w+(\.[a-z]{2,})+$/i

            // 10.将字符串当中所有的字母替换成*
            // const reg = /[a-z]/ig
            // console.log(val.replace(reg,"*"));

            // 11.验证账号((5-16个字符,包含数字,字母,下划线,首位必须是字母,而且还是忽略大小写)
            // const reg = /^[a-z]\w{4,15}$/i

            // 12.获取一串字符串当中所有的数字
            // const reg = /\d/g
            // console.log(val.match(reg));

            // 12.获取一串字符串当中所有的字母
            const reg = /[a-z]/ig
            console.log(val.match(reg));

            //校验
            if(reg.test(val)){
                spa.innerHTML = "校验正确!!!"
                spa.style.color = "green"
            }else{
                spa.innerHTML = "校验失败!!!"
                spa.style.color = "red"
            }
            //使用完毕情况value值
            inp.value = ""
        }
    </script>
</body>
</html>